<template>
  <div>
    <el-upload
      class="upload-css"
      :file-list="uploadFiles"
      ref="upload"
      :on-change="handleChange"
      :on-success="upLoadSuccess"
      :on-error="upLoadError"
      :http-request="uploadFile"
      :on-preview="download"
      :on-remove="handleRemove"
      action
      :auto-upload="false"
      :drag="false"
      :multiple="true"
      :list-type="uploadType"
      :disabled="disabled"
    >
      <el-button slot="trigger"   size="mini" type="primary">选取文件</el-button>
      <!-- <div slot="trigger" style="width:100%;height:100%;">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
      </div>
      <br> -->
      <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
      ·
      <!-- <div slot="tip" class="el-upload__tip">上传文件不能超过100MB</div> -->
    </el-upload>
  </div>
</template>

<script>
// import Vue from "vue";
// import { Upload, Button } from "element-ui";
// Vue.use(Upload);
//   Vue.use(Button);
import { getupload, getuploadDate, deleteFile,downloadFile } from "@/api/upload";

export default {
  props: {
    url: {
      type: String,
      required: true,
    },
    rno: {
      type: String,
      required: true,
    },
    bill: {
      type: String,
      required: true,
    }, 
    
    uploadType: { type: String, default: "picture-card" },

    disabled: {
      type: Boolean,
      required: false,
      default:false
    }
    
  },
  data() {
    return {
      uploadFiles: [], //上传的文件列表
      fileData: new FormData(), //文件上传数据（多文件合一）
    };
  },
  computed: {
    //文件的上传路径
    //附带用户id和项目名称
    uploadURL: function () {
      // return "/Common/uploadProject?userId=" + 1;
      return "?rno=" + this.rno + "&bill=" + this.bill;
    },
  },
  created: function () {
    this.DataListData();
  },
  methods: {
    async DataListData() {
      // 提交数据，需要修改

      const result = await getuploadDate({
        billID: this.bill,
        FileType: this.rno,
      });
      this.uploadFiles = result.data.Table;
    },
    //文件上传
    async submitUpload() {
      
      if (
        (this.rno != "" || this.rno != null) &&
        (this.bill == "" || this.bill == null)
      ) {
        
        this.$message({
          message: "请先保存单据生成单据编号！",
          type: "warning",
        });
        return;
      }
      if (this.uploadFiles.length === 0) {
        this.$message({
          message: "请至少选择一个文件！",
          type: "warning",
        });
        return;
      }
      if (this.uploadFiles.every((file) => file.size / 1024 / 1024 > 100)) {
        this.$message({
          message: "请检查，上传文件大小不能超过100MB!",
          type: "warning",
        });
        return;
      }
      this.fileData = new FormData();
      await this.$refs.upload.submit();
      const result = await getupload(this.uploadURL, this.fileData);
;
      if (result.code == 20000) {
        this.$message({
          message: "文件添加成功",
          type: "success",
        });
        this.$refs.upload.clearFiles();
        this.DataListData();
        this.ReSelect();
      }
      else{
        this.$message({
          message: result.msg,
          type: "error",
        });
      }
    },
    //覆盖默认的上传行为，可以自定义上传的实现
    uploadFile(param) {
      let fileObj = param.file; // 相当于input里取得的files
      this.fileData.append("files", fileObj); // append增加数据
    },
    async httpRequest(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      // const result = await getupload(this.uploadURL, fd);
    },
    async handleRemove(file, fileList) {
      console.log(file.UploadCode);
      const result = await deleteFile({ UploadCode: file.UploadCode });

      if (result.code == 20000) {
        this.$message({
          message: "删除成功",
          type: "success",
        });
      } else {
        this.$message({
          message: "删除失败",
          type: "warning",
        });
      }

      this.DataListData();
    },
    //文件状态改变时的钩子
    handleChange(file, fileList) {
      this.uploadFiles = fileList;

      //夫妻房登记
      if (this.rno == "1114") {
        var m = file;
        var type = m.name.substring(m.name.lastIndexOf(".") + 1);
        if (type != "pdf" && type != "PDF" && type != "jpg" && type != "JPG" && type != "png" && type != "PNG"  && type != "bmp" && type != "BMP" 
        && type != "gif" && type != "GIF" && type != "ufo" && type != "UFO" && type != "exif" && type != "EXIF" && type != "tif" && type != "TIF" && type != "tiff" && type != "TIFF"
        ) {
          fileList.splice(fileList.length - 1, 1);
          this.$notify({
            title: "错误",
            dangerouslyUseHTMLString: true,
            message: "文件格式不正确",
            type: "error",
          });
          return false;
        }
      }

      this.submitUpload();
    },
    //文件上传成功时的钩子
    upLoadSuccess(response, file) {
      if (response == "ok") {
        console.log(response + "已上传" + file);
        console.log("项目添加成功");
        this.$message({
          message: "文件添加成功",
          type: "success",
        });
      } else {
        console.log("项目添加失败");
        this.$message({
          message: "文件添加失败",
          type: "error",
        });
      }
    },
    //文件上传失败时的钩子
    upLoadError(response, file, fileList) {
      console.log(response)
      console.log("项目添加失败");
      this.$message({
          message: "文件添加失败",
          type: "error",
        });
    },
    //
    ReSelect() {
      this.$emit("ReSelect");
    },
    //下载文件
    async download(file, fileList) {
      console.log(file)

      
      let path=file.url
      
      const url = await downloadFile({
        fileName:file.name,
        path:path
      });

      let link = document.createElement("a");
      let fileName = file.name;
      document.body.appendChild(link);
      link.href = requestUrl;
      link.dowmload = fileName;
      link.click();
      link.remove();
    },
  },
};
</script>

<style lang="scss" scoped>
.upload-css {
  width: fit-content;
}
</style>
